
<template>
  <!-- 列表组件 -->
  <div class="equip-box">
    <div v-for="(item,index) in dataList" :key="index" class="equip-box-one" :class="nowIndex===index?'equip-box-one-active':''" @click="selectionChange(item,index)">
      {{ item.equipmentName }}
    </div>
  </div>
</template>
<script>
import equipStandingBookApi from "@/api/equip-manage/equip-standing-book";

export default {
  props: {
    seachEquip:{
      type: String,
      default: ""
    }
  },
  data() {
    return {
      dataList: [],
      nowIndex: ''
    }
  },
  created() {
    this.queryList()
  },
  mounted() {
  },
  watch:{
    seachEquip(v){
      this.queryList(v)
    }
  },
  methods: {
    selectionChange(e, index) {
      this.nowIndex = index
      this.$emit("selectionChange", e)
    },
    // 获取设备数据
    queryList() {
      equipStandingBookApi.queryEquipment(this.seachEquip).then(res => {
        if (res.code === 1) {
          let data = res.data || []
          this.dataList = []
          // var sortedObjKeys = Object.keys(data).sort();

            // 按默认排序规则，按对象的key排序
            var sortedObjKeys = Object.keys(data).sort();
            console.log(sortedObjKeys)
            for (var index in sortedObjKeys) {
                this.dataList.push({
                equipmentName: data[sortedObjKeys[index]],
                equipmentCode: sortedObjKeys[index]
              })
                // console.log(sortedObjKeys[index]);
                // console.log(data[sortedObjKeys[index]]);
                // console.log('----------');
            }
          // for (var i in data) {
          //   this.dataList.push({
          //     equipmentName: data[i],
          //     equipmentCode: i
          //   })
          // }
          if (this.dataList.length > 0) {
            this.selectionChange(this.dataList[0], 0)
          }
        }
      })
    }

  }
}
</script>
<style lang="scss"  scoped>
.equip-box{
  width: 100%;
  height: 100%;
  padding: 10px 0;
  overflow-y: auto;
}
.equip-box-one{
  width: 100%;
  padding: 15px 10px;
  color: #fff;
  font-size: 16px;
  background-color:  #024558;
  margin: 5px 0;
  cursor: pointer;
  &:hover{
    color: #000000;
    font-weight: 700;
    background-color: #fff;
  }
}
.equip-box-one-active{
  color: #000000;
  font-weight: 700;
  background-color: #fff;
}
</style>
